<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue生命周期函数</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="msg=Math.random()">修改数据</button>
        <p id="h3">{{msg}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods:{
                show: ()=>{
                    console.log('执行了show方法')
                }
            },
            /**
            *  这是第1个生命周期函数
            * 表示实例完全被创建之前，会执行它
            * 在beforeCreate执行时，data和methods里的数据都还没有初始化
            */
            beforeCreate() {
                // 这里执行的数据和函数都还没有被初始化
                // console.log(this.msg);
                // this.show();
            },
            /**
            * 这是第2个生命周期函数
            * 这个时候 data和methods里的数据已被初始化
            */
            created(){
                // 可以正常调用 data和methods里指定的数据或函数
                console.log(this.msg);
                this.show();
            },
            /**
            * 这是第3个生命周期函数
            * 表示模板已经在内存中编辑完成，但还没有显示到DOM中
            */
            beforeMount(){
                // 通过ID获取器，只能拿到 {{msg}} ，而不能拿到 msg 的真实值
                console.log( document.getElementById('h3').innerText);
            },
            /**
            * 这是第4个生命周期函数
            * 表示内存中的模板已经成功挂载到DOM上了
            * mounted是最后一个生命周期函数，这个时候页面真正显示
            */
            mounted(){
                // 这个时候就可以得到值了
                console.log( document.getElementById('h3').innerText);
            },
            /**
            * 这是第5个生命周期函数
            * 数据被更新后就会调用
            */
            beforeUpdate(){
                console.log('数据发生改变' + this.msg);
            }
        });
    </script>
</body>
</html>